<template>
	<div id="monitor-container" >
		<router-view v-slot="props" style="--animate-duration: 900ms;--animate-delay: 0.0s;">
			<transition mode="out-in" :appear="true" 
				:enter-active-class="`animate__animated animate__${route?.meta?.transition?.in ? route?.meta?.transition?.in:'zoomIn'}`"
				:leave-active-class="`animate__animated animate__${route?.meta?.transition?.out ? route?.meta?.transition?.out:'fadeOut'}`"
			>
				<keep-alive include="desktop,Desktop" :max="20">
					<component :is="props.Component" :key="props.route.path" />
				</keep-alive>
			</transition>
		</router-view>
	</div>
</template>

<script setup>
	import { onMounted,onUnmounted } from "vue";
	import { useRoute } from 'vue-router';
	import coreStore from './stores/core.js';
	const $coreStore = coreStore();
	const route = useRoute();
	
	onMounted(()=> {
		console.log('-> monitor init');
		window.addEventListener('mousedown', onMousedown);
	})
	
	onUnmounted(()=>{
		window.removeEventListener('mousedown', onMousedown);
	})
	
	const onMousedown = function() {
		$coreStore.closeContextMenu();
	}
</script>

<style lang="less" scoped>

</style>
